<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--DOM -->
    <!-- 获取元素    document.getElementById() -->
    <div id="s">sunjinyao</div>
    <ul>
        <li>知否</li>
        <li>知否</li>
        <li>知否</li>
    </ul>
    <ol id="red">
        <li>绿肥红瘦</li>
        <li>绿肥红瘦</li>
        <li>绿肥红瘦</li>
        <li>绿肥红瘦</li>
    </ol>
    <script>
        let mame = document.getElementById('s');   //element 元素  返回的是一个元素对象
        console.log(mame);
        //更好的查看属性和方法
        console.dir(mame);

        // getElementsByTagName()  可以返回带有指定标签名的对象的集合
        let lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);  //第一个元素
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i]);   //返回的是伪数组形式
        }
        let ol = document.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li'));


        //2  document.getElementsByClassName('类名')  根据类名返回元素对象集合
        // document.querySelector('选择器')    根据指定选择器返回第一个元素对象
        //  document.querySelector('.box')     //第一个box 选择出来了
        //document.querySelector('#box')
        //document.querySelector('li')
        //3  document.querySelectorAll('选择器')   根据指定选择器返回
           //document.querySelectorAll('.box')   //所有的box都选择出来了
    
    //document.body  返回body元素对象
    // document.documentElement  返回html元素对象
    
    </script>

</body>

</html>